import {
    Box,
    Button,
    Flex,
    FormControl,
    FormLabel,
    Heading,
    Input, Radio,
    RadioGroup, Select,
    Stack, Text,
    useColorModeValue, useToast
} from "@chakra-ui/react";
import React, {useEffect, useState} from "react";
import {DatePicker} from "antd";
import {useLocation, useParams} from "react-router-dom";
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import {findMedicineById, getAllCategory, updateMedicine} from "../../../api/medicine.js";
import {handleResult} from "../../../api/result.js";


export default function MedicineEditPage(props) {
    let toast = useToast()

    // 数据获取
    const {id} = useParams()
    const [categories, setCategories] = useState([])
    // 表单 分类id
    const [categoryId, setCategoryId] = useState(1)
    useEffect(() => {
        findMedicineById(id).then(res => {
            const {data} = res
            setName(data.name)
            setNumber(data.number)
            setPrice(data.price)
            setCategoryId(data.categoryId)
        })
        getAllCategory().then(r => {
            setCategories(r.data)
        })
    }, [])

    const [name, setName] = useState('')
    const [number, setNumber] = useState(0)
    const [price, setPrice] = useState(0)

    const handleClick = () => {
        console.log(id, name, number, categoryId)
        updateMedicine({id, name, number, price, categoryId}).then(r => {
            handleResult(r, toast, '', '修改成功', 'medicine')
        })
    }

    const handleBack = () => {
        location.replace('/medicine')
    }

    return (
        <Flex
            align={'center'}
            justify={'center'}
            bg={useColorModeValue('gray.50', 'gray.800')}>
            <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
                <Stack align={'center'}>
                    <Heading fontSize={'4xl'}>修改信息</Heading>
                </Stack>
                <Box
                    rounded={'lg'}
                    bg={useColorModeValue('white', 'gray.700')}
                    boxShadow={'lg'}
                    p={8}>
                    <Stack spacing={4}>
                        <FormControl id="name">
                            <FormLabel>名称</FormLabel>
                            <Input
                                onChange={(e) => setName(e.target.value)}
                                value={name} type="text"/>
                        </FormControl>
                        <FormControl id="number">
                            <FormLabel>库存</FormLabel>
                            <Input
                                onChange={(e) => setNumber(e.target.value)}
                                value={number} type="number"/>
                        </FormControl>
                        <FormControl id="number">
                            <FormLabel>单价</FormLabel>
                            <Input
                                onChange={(e) => setPrice(e.target.value)}
                                value={price} type="number"/>
                        </FormControl>
                        <FormControl>
                            <FormLabel htmlFor='category'>药品分类</FormLabel>
                            <Select
                                onChange={e => {
                                    setCategoryId(e.target.value)
                                }} id='category' value={categoryId}>
                                {
                                    categories.map((item) => (
                                        <option
                                            key={item.id} value={item.id}>
                                            {item.category}
                                        </option>
                                    ))
                                }
                            </Select>
                        </FormControl>
                        <Stack spacing={5}>
                            <Button
                                onClick={handleClick}
                                bg={useColorModeValue('blue.400', 'blue.600')}
                                color={'white'}
                                _hover={{
                                    bg: 'blue.500',
                                }}>
                                修改
                            </Button>
                            <Button
                                onClick={handleBack}
                                bg={useColorModeValue('blue.400', 'blue.600')}
                                color={'white'}
                                _hover={{
                                    bg: 'blue.500',
                                }}>
                                返回
                            </Button>
                        </Stack>
                    </Stack>
                </Box>
            </Stack>
        </Flex>
    )
}